<template>
  <div class="dynamicMake-container">
    <van-nav-bar title="发布动态">
      <template #left>
        <span @click="$router.back()">
          <svg-icon style="margin-left: 10px;" icon-class='fanhui' width="30px" height="30px" class="icon"/>
        </span>
      </template>
    </van-nav-bar>
    <van-field
      v-model="messageMic"
      rows="4"
      autosize
      type="textarea"
      maxlength="130"
      placeholder="幸好热爱可抵岁月漫长~"
      show-word-limit
    />
    <van-uploader
      v-model="fileList"
      :multiple="true"
      upload-icon="plus"
      :max-count="3"
      :after-read="afterRead"
      :before-delete="delUploadImg"
    />
    <van-cell is-link title="谁可以看" :value="rangeViewValue" @click="show = !show" class="rangView"/>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect"/>

    <van-button round type="info" color="#ec87c0" @click="onsubmit">确定</van-button>

  </div>
</template>

<script>
import { addCoverAPI, addNewMicAPI } from '@/api'
import { maskAndTrimStr } from '@/utils/sensitiveWords'

export default {
  name: 'dynamicMake',
  data () {
    return {
      showPopover: false,
      fileList: [],
      messageMic: '',
      rangeView: 'true',
      rangeViewValue: '全部人可见',
      show: false,
      place: '上海市',
      actions: [{ name: '全部人可见' }, { name: '仅对象可见' }, { name: '仅自己可见' }] // micStatus true id false
    }
  },
  created () {
    // this.getPlaceIp()
  },
  methods: {
    async afterRead (file) {
      // 此时可以自行将文件上传至服务器
      const imgFile = new FormData()
      imgFile.append('fileType', 'IMAGE')
      imgFile.append('file', this.fileList[this.fileList.length - 1].file)
      const { data: res } = await addCoverAPI(imgFile)
      console.log(res)
      console.log(typeof file)
      if (res) {
        file.status = 'success'
        file.message = ''
        file.url = res.url
      }
      console.log(this.fileList)
    },
    // 删除
    delUploadImg (item) {
      console.log(item)
      this.fileList = this.fileList.filter((v) => v.url !== item.url)
      console.log(this.fileList)
    },
    // 选择动态范围
    onSelect (item) {
      this.show = false
      if (item.name === this.actions[2].name) {
        this.rangeView = 'false'
      } else if (item.name === this.actions[1].name) {
        this.rangeView = '1'
      } else {
        this.rangeView = 'true'
      }
      this.rangeViewValue = item.name
    },
    // getPlaceIp () {
    //   fetch('https://www.mxnzp.com/api/ip/self?app_id=pbimqfqkl0qazftk&app_secret=ZndGVnZEZ3NyYkpsUHQxRUM4YzBrZz09')
    //     .then(response => response.json())
    //     .then(data => {
    //       this.place = data.data.city
    //     })
    //     .catch(error => console.error(error))
    // },
    async onsubmit () {
      const micObj = {
        content: maskAndTrimStr(this.messageMic),
        rangeView: this.rangeView,
        pubDate: new Date(),
        IpLocation: this.place,
        cover: this.fileList.map(item => item.url).join('$$')
      }
      console.log(micObj)
      const res = await addNewMicAPI(micObj)
      if (res) {
        this.$router.back()
      }
    }
  }
}
</script>

<style scoped lang="less">
.dynamicMake-container {
  background-color: #fff;
  height: 100vh;
  margin: auto;

  .van-nav-bar {
    &::after {
      border: none;
    }
  }

  .van-cell {
    height: 130px;
    padding: 15px 20px 0;

    &:after {
      border: none;
    }
  }

  .van-uploader {
    padding: 0 20px;
  }

  ::v-deep .van-button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 50px;
    width: 150px;
    font-size: 16px;
    letter-spacing: 1px;
    box-shadow: 3px 2px 2px #ccc;
  }
}
</style>
